import React from "react";
import { Pager, SecurityLevelList, SecurityRule } from "../../../server/interface";
import { Button, Form, Input, Modal, Popconfirm, Select, Table } from "antd";
import { apis } from "../../apis";

const ModalAdd = (props: { onFinish: { (): void } }) => {
    const [visible, setVisible] = React.useState(false)
    const [form] = Form.useForm<SecurityRule>()

    const onFinish = () => {
        form.validateFields().then((values) => {
            apis.white_list_add(values).then((res) => {
                setVisible(false)
                props.onFinish?.()
            })
        })
    }

    return <>
        <Button type="primary" onClick={() => setVisible(true)}>添加</Button>
        <Modal title="添加" open={visible} onClose={() => setVisible(false)} onCancel={() => setVisible(false)} footer={null}>
            <Form form={form} onFinish={onFinish} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} >
                <Form.Item label="域名" name="host" required rules={[{ required: true }]}>
                    <Input />
                </Form.Item>
                {/* <Form.Item label="等级" name="level" required rules={[{ required: true, message: "请选择" }]}>
                    <Select options={SecurityLevelList} />
                </Form.Item> */}
                <Form.Item wrapperCol={{ offset: 4 }}>
                    <Button type="primary" onClick={onFinish}>提交</Button>
                    &nbsp;
                    <Button onClick={() => {
                        setVisible(false)
                    }}>取消</Button>
                </Form.Item>
            </Form>
        </Modal>
    </>
}

const WhiteList = () => {
    const [data, setData] = React.useState<Pager<SecurityRule>>()
    const [loading, setLoading] = React.useState(false)
    const [page, setPage] = React.useState(1)

    const onSearch = () => {
        setLoading(true)
        apis.white_list({
            page: page,
            pageSize: 10,
        }).then((res) => {
            setData(res.data)
            setLoading(false)
        })
    }

    React.useEffect(() => {
        onSearch()
    }, [page])

    return (
        <>
            <div className="text-right">
                <ModalAdd onFinish={onSearch} />
            </div>
            <Table loading={loading} columns={[
                {
                    title: "序号",
                    dataIndex: "index",
                    key: "index",
                    render: (_, record, index) => page * 10 + index - 9,

                },
                {
                    title: "域名",
                    dataIndex: "host",
                    key: "host",
                },
                // {
                //     title: "等级",
                //     dataIndex: "level",
                //     key: "level",
                //     render: (level) => SecurityLevelList.find((item) => item.value === level)?.label || level,
                // },
                {
                    title: "创建时间",
                    dataIndex: "createdAt",
                    key: "createdAt",
                    render: (time) => new Date(time).toLocaleString(),
                },
                {
                    title: "创建人",
                    dataIndex: "createdBy",
                    key: "createdBy",
                },
                {
                    title: "操作",
                    key: "action",
                    dataIndex: "_id",
                    render: (text, record) => {
                        return <Popconfirm title="确认删除?" onConfirm={() => {
                            apis.white_list_delete({
                                host: record.host,
                            }).then(() => {
                                onSearch()
                            })
                        }}>
                            <Button size="small" type="link">删除</Button>
                        </Popconfirm>
                    }
                }
            ]} dataSource={data?.list} rowKey="_id" pagination={{
                current: page,
                pageSize: 10,
                total: data?.total,
                onChange: setPage,
            }} />
        </>
    )
}
export default WhiteList;